<template>
  <a-date-picker
    :getCalendarContainer="node => node.parentNode"
    mode="year"
    @openChange="openChange"
    @panelChange="panelChange"
    :valueFormat="valueFormat"
    :format="format"
    :open="open"
    v-bind="$attrs"
  />
</template>
<script>
export default {
  name: 'YearPicker',
  props: {
    valueFormat: {
      type: String,
      default: 'YYYY'
    },
    format: {
      type: String,
      default: 'YYYY'
    }
  },
  data() {
    return {
      open: false
    }
  },
  methods: {
    openChange(status) {
      this.open = status
    },
    panelChange(value) {
      this.open = false
      this.$emit('change', value ? value.format(this.valueFormat) : value)
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
